<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/admin/layui/css/layui.css" media="all"/>
</head>
<body>
    <button class="layui-btn" style="margin-left: 50px" id="bingding-btn">
        <i class="layui-icon">&#xe673;</i> 绑定分销员
    </button>

    <button class="layui-btn" style="margin-left: 20px" id="restore-btn">
        <i class="layui-icon">&#xe656;</i>机器恢复
    </button>

    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>

<script src="/admin/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','jquery','element','form','layer'], function() {
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , element = layui.element;

        table.render({
            elem: '#tableId'
            ,url:'/machine/getAllMachine'
            // ,toolbar: '#toolbarDemo'
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,title: '用户数据表'
            ,limit:20
            ,totalRow:true
            ,cols: [        //  "[["需要将两个括号拆开换行，因为[[…]]之间的表达式在Thymeleaf被认为是内联表达式
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'machineId', title:'机器IMEI码', width:200, unresize: true, align:'center'}
                    ,{field:'status', title:'机器状态', width:200, unresize: true, align:'center',templet:function(res){
                        if(res.status == 1){
                            return "正常"
                        }else{
                            return "故障"
                        }
                    }}
                    ,{field:'errorCode',title:'故障信息',width:200,unresize:true,align:'center',templet:function (res) {
                        if(res.status == 1){
                            return "无故障";
                        }
                        if(res.errorCode == '001'){
                            return "电机故障";
                        }else if(res.errorCode == '002'){
                            return "光眼故障";
                        }
                    }}
                    ,{field:'createDatetime', title:'创建时间', width:200,align:'center',sort:true}
                ]]
            // ,done:function(res, curr, count) {  //res 接口返回的信息
            //
            //     $("[data-field = 'status']").children().each(function () {
            //
            //         if ($(this).text() == '1') {
            //
            //             $(this).text("正常");
            //
            //         } else if ($(this).text() == '0') {
            //
            //             $(this).text("故障");
            //         }
            //     })
            // }
            ,page: true,id:'machineTable'
        });


        $("#bingding-btn").click(function () {
            var checkedBox = table.checkStatus('machineTable');
            var checkedData = checkedBox.data; //获取选中的数据
            if(checkedData.length > 1 || checkedData.length < 1){
                layer.alert("请选中一台机器进行绑定",{icon:0});
                return;
            }
            var machineId = checkedData[0].machineId;
            layer.open({
                type: 2 //此处以iframe举例
                , title: "绑定分销员"
                // , area: ['520px', ($(window).height())+'px']
                , area: ['520px', '300px']
                , shade: 0,
                // , offset:'rb',
                scrollbar: false,
                shade:0.5,
                shift: 2,
                btn: '确定',
                fixed:false,
                resize:false,
                yes:function(index, layero){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var phone = body.find('input[name=phone]').val();
                    var machineId = body.find('input[name=machineId]').val();
                    if(!phone){
                        alert("请填写分销员手机号!");
                    }else{
                        $.ajax({
                            type: "POST",
                            url: '/machine/binding',
                            async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                            data:{
                                phone: phone,
                                machineId:machineId
                            },
                            success: function(result) {
                                console.log(result);
                                if(result.status == 200){
                                    layer.close(index);
                                    layer.msg("绑定成功！",{icon:1},function () {
                                        table.reload('machineTable');
                                    });
                                }else{
                                    layer.alert(result.message);
                                }
                            },
                            error: function(error) {
                                alert(error.status);
                            }
                        });
                        // layer.closeAll();
                    }
                },
                scrollbar:true,
                shadeClose:true,
                move:false
                , maxmin: false
                , content: '/machine/bindingMember?machineId='+machineId
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero); //重点2
                }
            });
        })

        $("#restore-btn").click(function () {
            var checkData = table.checkStatus('machineTable');
            if(checkData.data.length < 1){
                layer.alert("至少选择一台机器恢复",{icon:0});
                return;
            }
            var machineIds = [];
            for(var i=0; i< checkData.data.length; i++){
                machineIds.push(checkData.data[i].machineId);
            }
            console.log(machineIds);
            $.ajax({
                type: "POST",
                url: '/machine/recover',
                async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                data:{
                    machineIds:machineIds
                },
                success: function(result) {
                    if(result.status == 200){
                        layer.msg("机器恢复成功！",{icon:1},function () {
                            table.reload('machineTable');
                        });
                    }else{
                        layer.alert(result.message);
                    }
                },
                error: function(error) {
                    alert(error.status);
                }
            });
        })

        $("#stock-btn").click(function () {
            var checkData = table.checkStatus('machineTable');
            console.log(checkData);
            layer.open({
                type: 2 //此处以iframe举例
                , title: "机器上货"
                // , area: ['520px', ($(window).height())+'px']
                , area: ['520px', '300px']
                , shade: 0,
                // , offset:'rb',
                scrollbar: false,
                shade:0.5,
                shift: 2,
                btn: '确定',
                fixed:false,
                resize:false,
                yes:function(index, layero){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var memberId = body.find('input[name=memberId]').val();
                    if(!memberId){
                        alert("请填写分销员ID!");
                    }else{
                        layer.close(index);
                    }
                },
                scrollbar:true,
                shadeClose:true,
                move:false
                , maxmin: false
                , content: '/machine/bindingMember'
                , zIndex: layer.zIndex //重点1
                , success: function (layero) {
                    layer.setTop(layero); //重点2
                }
            });
        })
    })


</script>

</body>
</html>